<!DOCTYPE html>
<html>
<head>
	<title>山海经之家</title>
	<!--for-mobile-apps-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="" />
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<!--//for-mobile-apps-->
	
	<!-- Custom-Theme-Files -->
    <!-- Bootstrap-CSS --> 			<link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- JQuery --> 				<script src="js/jquery.min.js">			</script>
    <!-- Bootstrap-Main --> 		<script src="js/bootstrap.min.js">		</script>
    <!-- Index-Page-Styling --> 	<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<!-- Start-Smooth-Scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event){     
                event.preventDefault();
                $('html,body').animate({scrollTop:$(this.hash).offset().top},2000);
            });
        });
    </script>
<!-- //End-Smooth-Scrolling -->

<link rel="stylesheet" type="text/css" href="css/easy-responsive-tabs.css " />
<script src="js/easyResponsiveTabs.js"></script>
	
</head>

<body>

<div class="header">
		<div class="nav">
			<nav class="navbar navbar-inverse navbar-fixed-top">
				<div class="container">
				<!-- Brand and toggle get grouped for better mobile display -->
						<div class="navbar-header">
							<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
						   <a class="navbar-brand" href="#"><img src="./images/logo2.png" alt="logo"></a>
						</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						
						<ul class="nav navbar-nav navbar-right">
							<li><a href="#home" class="active scroll">主页</a></li>
							<li><a href="#about" class="scroll">关于我们</a></li>
							<li><a href="#requirements" class="scroll">需求</a></li>
							<li><a href="#games" class="scroll">游戏</a></li>
							<li><a href="#ourteam" class="scroll">团队</a></li>
							<li><a href="#contact" class="scroll">加入我们</a></li>
						</ul>
						
					</div><!-- navbar-collapse -->
				</div><!-- container -->
			</nav>
		</div> <!-- Nav Ends -->
				
		<div class="banner" id="home">
			<div class="container">
				<div class="banner-content">
					<h1>异兽·山海经</H1>
					<h2>一个属于我们自己的世界 </h2>
					<p>巴拉巴拉一堆一堆，我不知道编啥了。</p>
				</div>
			</div>
		</div> <!-- Banner Ends Here -->
</div> <!-- Header Ends -->

	
<div class="about" id="about">	
	<div class="container">
	  
		<h3> 欢迎来到 <span>异兽·山海经</span> </h3>
		<h4>这是一段游戏介绍，但是我不知道怎么介绍哦
		</h4>
		
		<div class="about-image">
			
			<div class="col-md-4 about-size">
				<div class="shadow">
					<img src="./images/ai1.jpg" alt="image">
				</div>
				<h5>我们的游戏特色</h5>
				<p>很有特色</p>
			
			</div>
			
			<div class="col-md-4 about-size">
				<div class="shadow">
					<img src="./images/ai2.jpg" alt="image">
				</div>
				<h5>我们的游戏介绍</h5>
				<p>就很好玩</p>
			
			</div>
			
			<div class="col-md-4 about-size">
				<div class="shadow">
					<img src="./images/ai3.jpg" alt="image">
				</div>
				<h5>不知道写啥了</h5>
				<p>反正就好玩</p>
			
			</div>
		  <div class="clearfix"> </div>
		</div>  <!-- About-image Ends  -->
		
	</div> <!-- Container ends -->	
</div> <!-- About Ends -->


<div class="requirement" id="requirements"> <!-- Requirements Starts   -->
	<div class="container">
		<div class="all-require">
		
				<div class="heading">
					<h3>异兽·山海经<span>  所需配置（瞎写的，看看这模块写啥好吧）</span> </h3>
				</div>
		
				<div class="specification">
		
					<div class="col-md-4 require-size">
						<div class="grid">
							<i class="pc"> </i>
							<p> OS : <span>Windows 8 64-Bit </span> </p>
							<p>	CPU : <span>Intel® Core™ 2 Duo  </span>	</p>
							<p>	Memory : <span>6 GB RAM	</span> </p>
							<p>	Hard Disk Space : <span>40 GB	</span> </p>
							<p>	Video : <span>NVIDIA® GTS 450 / ATI® 5870</span> </p>
							<p>	Sound : <span>DirectX compatible</span> </p>
							<p>	DirectX® : <span>DirectX® 11	</span> </p>
							<p>	Internet : <span>Broadband  </span>	</p>
						</div>
					</div>
			
					<div class="col-md-4 require-size">
						<div class="grid">
							<i class="xbox"> </i>
							<h5> Xbox One </h5>
							<p>	Storage : <span>40 GB of free space </span>	</p>
							<p>	HD Video Output : <span>1080px	</span> </p>
					
							<div class="grid-bottom">
								<h5> Xbox 360 </h5>
								<p>	Storage : <span>50 GB of free space </span>	</p>
								<p>	HD Video Output : <span>1920px	</span> </p>
							</div>
						</div>
					</div>
			
					<div class="col-md-4 require-size">
			
						<div class="grid">
							<i class="ps"> </i>
							<h5> PS 2 </h5>
							<p>	Storage : <span>40 GB of free space </span>	</p>
							<p>	HD Video Output : <span>1080px	</span> </p>
					
							<div class="grid-bottom">
								<h5> PS 3 </h5>
								<p>	Storage : <span>50 GB of free space </span>	</p>
								<p>	HD Video Output : <span>1920px	</span> </p>
							</div>
						</div>
					</div>
					
				  <div class="clearfix"> </div>
				</div>	<!-- Specification Ends here   -->
		</div>
	  </div>
	</div> <!-- requirement Ends -->


<div class="upcoming" id="games">
	<div class="container">
		<div class="padding-upcoming">
			
			<h3>异兽·山海经<span>游戏特色</span> </h3>
				
			<div class="background shadow1">

				<div id="parentVerticalTab">

					<div class="col-md-7 trailer game-video">	
						<div class="resp-tabs-container hor_1">
												
							<div>
								<div class="category" style="color: aliceblue;">
									<iframe  width="560" height="315" src="images/1shipin.mp4" frameborder="0" allowfullscreen></iframe>
								</div>
							</div>
							<div>
								<div class="category">
									<div>这里应该有视频和链接</div>
									<iframe width="560" height="315" src="images/2shipin.mp4" frameborder="0" allowfullscreen></iframe>
								</div>
							</div>	
							<div>
								<div class="category">
									<div>这里应该有视频和链接</div>
									<iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
								</div>
							</div>
						  <div class="clearfix"></div>
						</div>
					</div>
				
					
					<div class="col-md-5 trailer-text game-image">
						<ul class="resp-tabs-list hor_1">
							<li>
								<div class="sub-trailer">
									<div class="sub-img">
										<img src="images/up1.jpg" alt="img07"/>
									</div>
									<div class="sub-text">
										<h4>特色特色</h4>
										<p>特色特色</p>
									</div>
								  <div class="clearfix"> </div>
								</div>
							</li>
						
							<li>
								<div class="sub-trailer">
									<div class="sub-img">
										<img src="images/up2.jpg" alt="img07"/>
									</div>
									<div class="sub-text">
										<h4> 特色特色 </h4>
										<p>特色特色</p>
									</div>
								  <div class="clearfix"> </div>
								</div>
							</li>
						
							<li>
								<div class="sub-trailer">
									<div class="sub-img">
										<img src="images/up3.jpg" alt="img07"/>
									</div>
									<div class="sub-text">
										<h4>特色特色</h4>
										<p>特色特色</p>
									</div>
								  <div class="clearfix"> </div>
								</div>
							</li>
						  <div class="clearfix"></div>	
						</ul>
					</div>	
			
				
	              <div class="clearfix"></div>			
				</div>

			</div>
		</div>
	</div>
</div>



<!--Plug-in Initialisation-->
	<script type="text/javascript">
    $(document).ready(function() {

        //Vertical Tab
        $('#parentVerticalTab').easyResponsiveTabs({
            type: 'vertical', //Types: default, vertical, accordion
            width: 'auto', //auto or any width like 600px
            fit: true, // 100% fit in a container
            closed: 'accordion', // Start closed if in accordion view
            tabidentify: 'hor_1', // The tab groups identifier
            activate: function(event) { // Callback function if tab is switched
                var $tab = $(this);
                var $info = $('#nested-tabInfo2');
                var $name = $('span', $info);
                $name.text($tab.text());
                $info.show();
            }
        });
    });
</script>
<!-- Up Coming Games Ends Here -->

 
<div class="our-team">
	<div class="container">
		<div class="team" id="ourteam">
		  <h3>我们的成员</h3>
			
			<div class="team-up">			
				<div class="col-md-3 team-size">
					<div class="team-img">
						<img src="./images/t1.jpg" alt="image">
						<h4>cuifeng333</h4>
						<p>开发</p>
					</div>
				</div>
				
				<div class="col-md-3 team-size">
					<div class="team-img">
						<img src="./images/t2.jpg" alt="image">
						<h4> Ipsum Lorem </h4>
						<p>Graphic Designer</p>
					</div>
				</div>
				
				<div class="col-md-3 team-size">
					<div class="team-img">
						<img src="./images/t2.jpg" alt="image">
						<h4> Ipsum Lorem </h4>
						<p>Graphic Designer</p>
					</div>
				</div>
				
				<div class="col-md-3 team-size">
					<div class="team-img">
						<img src="./images/t2.jpg" alt="image">
						<h4> Ipsum Lorem </h4>
						<p>Graphic Designer</p>
					</div>
				</div>
				
				<div class="clearfix"></div>
			</div>                      <!-- Team-up ends here -->
			
			<div class="team-bottom">			
				<div class="col-md-3 team-size">
					<div class="team-img">
						<img src="./images/t4.jpg" alt="image">
						<h4>Lorem Ipsum </h4>
						<p>Desktop publishing</p>
					</div>
				</div>
				
				<div class="col-md-3 team-size">
					<div class="team-img">
						<img src="./images/t5.jpg" alt="image">
						<h4> Ipsum Lorem </h4>
						<p>Graphic Designer</p>
					</div>
				</div>
				
				<div class="col-md-3 team-size">
					<div class="team-img">
						<img src="./images/t1.jpg" alt="image">
						<h4>Olrem Ipsum </h4>
						<p>System Designer</p>
					</div>
				</div>
				
				<div class="col-md-3 team-size">
					<div class="team-img">
						<img src="./images/t2.jpg" alt="image">
						<h4>Rolem Ipsum </h4>
						<p>Media publishing</p>
					</div>
				</div>
			  <div class="clearfix"></div>	
			</div> <!-- Team-bottom ends here -->
		
		  <div class="clearfix"></div>
		</div> <!-- Team Ends -->

    </div>
</div> <!-- Our-team Ends -->
	
	
<div class="contact" id="contact">
  <div class="container">
	<div class="padding-contact">
			
		<div class="col-md-4 address">
		  <h3>联系方式</h3>
			<address>
				Lorem Ipsum<br>
				HTML5 Buildings,<br>
				Doctorville,<br>
				qq:644656790<br>
				qq粉丝群:737879447<br>
				<span>Phone : +123 4567 8900</span>
			</address>
		</div>
			
		<div class="col-md-4 social-icons">
		  <h3>联系我们</h3>
			<ul class="social">
				<li><a href="#" class="facebook" title="Go to Our Facebook Page"></a></li>
				<li><a href="#" class="twitter" title="Go to Our Twitter Account"></a></li>
				<li><a href="#" class="googleplus" title="Go to Our Google Plus Account"></a></li>
				<li><a href="#" class="instagram" title="Go to Our Instagram Account"></a></li>
				<li><a href="#" class="youtube" title="Go to Our Youtube Channel"></a></li>
			</ul>
		</div>
			
		<div class="col-md-4 newsletter">
		  <h3>提交信息</h3>
			<form>
				<input type="text" value="请输入您的意见" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '请输入您的意见';}">
				<input type="submit" value="提交">
			</form>
		</div>
	  <div class="clearfix"></div>
	</div>
			
		<div class="footer">
			<p>版权所有 &copy; 2020.最右App山海经开发组</p>
		</div>
  </div>
</div>
	
</body>
</html>